.LockScreenA16 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    position: relative;
    z-index: 1;


    .container {
        margin: auto;
        width: 300px;
        height: 300px;
        position: relative;
        top: 45%;
        transform: translateY(-45%);
    }

    .ring {
        width: 300px;
        height: 300px;
        border-radius: 300px;
        position: absolute;
        mix-blend-mode: screen;
        background: transparent;
    }

    .red {
        border: 18px solid #d50f1c;
        animation: redanim linear 6s;
        animation-iteration-count: infinite;
    }

    .green {
        border: 18px solid #009927;
        animation: greenanim linear 6s;
        animation-iteration-count: infinite;
    }

    .blue {
        border: 18px solid #3569e1;
        animation: blueanim linear 6s;
        animation-iteration-count: infinite;
    }

    .yellow {
        border: 18px solid #edb40f;
        animation: yellowanim linear 6s;
        animation-iteration-count: infinite;
    }

    @keyframes redanim {
        0% {
            transform: rotate(0deg) scaleX(0.9) scaleY(1);
        }

        50% {
            transform: rotate(180deg) scaleX(0.9) scaleY(1);
        }

        100% {
            transform: rotate(360deg) scaleX(0.9) scaleY(1);
        }
    }

    @keyframes greenanim {
        0% {
            transform: rotate(31deg) scaleX(0.9) scaleY(1);
        }

        25% {
            transform: rotate(121deg) scaleX(1) scaleY(0.9);
        }

        50% {
            transform: rotate(211deg) scaleX(0.9) scaleY(1);
        }

        75% {
            transform: rotate(301deg) scaleX(1) scaleY(0.9);
        }

        100% {
            transform: rotate(391deg) scaleX(0.9) scaleY(1);
        }
    }

    @keyframes blueanim {
        0% {
            transform: rotate(413deg) scaleX(0.9) scaleY(1);
        }

        50% {
            transform: rotate(233deg) scaleX(0.9) scaleY(1);
        }

        100% {
            transform: rotate(53deg) scaleX(0.9) scaleY(1);
        }
    }

    @keyframes yellowanim {
        0% {
            transform: rotate(472deg) scaleX(0.9) scaleY(1);
        }

        25% {
            transform: rotate(382deg) scaleX(1) scaleY(0.9);
        }

        50% {
            transform: rotate(292deg) scaleX(0.9) scaleY(1);
        }

        75% {
            transform: rotate(202deg) scaleX(1) scaleY(0.9);
        }

        100% {
            transform: rotate(112deg) scaleX(0.9) scaleY(1);
        }
    }

}